<template>
  <div class="container">
    <!-- 添加页面导航 -->
    <PageNavigation pageTitle="操作日志" />
    
    <div class="page-header">
      <h2>操作日志</h2>
      <p>查看系统操作记录 (sys_oper_log 表)</p>
    </div>

    <!-- 搜索表单 -->
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="操作模块">
        <el-input v-model="queryParams.title" placeholder="请输入操作模块" clearable />
      </el-form-item>
      <el-form-item label="操作类型">
        <el-select v-model="queryParams.businessType" placeholder="操作类型" clearable>
          <el-option label="查询" value="0" />
          <el-option label="新增" value="1" />
          <el-option label="修改" value="2" />
          <el-option label="删除" value="3" />
          <el-option label="导出" value="4" />
          <el-option label="导入" value="5" />
          <el-option label="其他" value="6" />
        </el-select>
      </el-form-item>
      <el-form-item label="操作状态">
        <el-select v-model="queryParams.status" placeholder="操作状态" clearable>
          <el-option label="成功" value="0" />
          <el-option label="失败" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="操作人员">
        <el-input v-model="queryParams.operName" placeholder="请输入操作人员" clearable />
      </el-form-item>
      <el-form-item label="时间范围">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
        <el-button type="danger" @click="handleClear">清空日志</el-button>
        <el-button type="success" @click="exportData">导出数据</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="logList" style="width: 100%" v-loading="loading">
      <el-table-column type="index" width="50" />
      <el-table-column prop="operId" label="日志编号" width="80" />
      <el-table-column prop="title" label="系统模块" />
      <el-table-column prop="businessType" label="操作类型">
        <template #default="scope">
          <el-tag v-if="scope.row.businessType === '0'" type="info">查询</el-tag>
          <el-tag v-else-if="scope.row.businessType === '1'" type="success">新增</el-tag>
          <el-tag v-else-if="scope.row.businessType === '2'" type="warning">修改</el-tag>
          <el-tag v-else-if="scope.row.businessType === '3'" type="danger">删除</el-tag>
          <el-tag v-else-if="scope.row.businessType === '4'" type="info">导出</el-tag>
          <el-tag v-else-if="scope.row.businessType === '5'" type="info">导入</el-tag>
          <el-tag v-else type="info">其他</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="method" label="操作方法" width="150" />
      <el-table-column prop="operName" label="操作人员" />
      <el-table-column prop="operIp" label="操作IP" />
      <el-table-column prop="operLocation" label="操作地点" />
      <el-table-column prop="status" label="操作状态">
        <template #default="scope">
          <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
            {{ scope.row.status === '0' ? '成功' : '失败' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="operTime" label="操作时间" width="180" />
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <el-button size="small" @click="handleDetail(scope.row)">详细</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="queryParams.pageSize"
        :current-page="queryParams.pageNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 详细信息对话框 -->
    <el-dialog title="操作详细信息" v-model="dialogVisible" width="700px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="操作模块">{{ currentLog.title }}</el-descriptions-item>
        <el-descriptions-item label="操作人员">{{ currentLog.operName }}</el-descriptions-item>
        <el-descriptions-item label="操作类型">
          <el-tag v-if="currentLog.businessType === '0'" type="info">查询</el-tag>
          <el-tag v-else-if="currentLog.businessType === '1'" type="success">新增</el-tag>
          <el-tag v-else-if="currentLog.businessType === '2'" type="warning">修改</el-tag>
          <el-tag v-else-if="currentLog.businessType === '3'" type="danger">删除</el-tag>
          <el-tag v-else-if="currentLog.businessType === '4'" type="info">导出</el-tag>
          <el-tag v-else-if="currentLog.businessType === '5'" type="info">导入</el-tag>
          <el-tag v-else type="info">其他</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="操作时间">{{ currentLog.operTime }}</el-descriptions-item>
        <el-descriptions-item label="操作IP">{{ currentLog.operIp }}</el-descriptions-item>
        <el-descriptions-item label="操作地点">{{ currentLog.operLocation }}</el-descriptions-item>
        <el-descriptions-item label="操作状态">
          <el-tag :type="currentLog.status === '0' ? 'success' : 'danger'">
            {{ currentLog.status === '0' ? '成功' : '失败' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="请求方法" :span="2">{{ currentLog.method }}</el-descriptions-item>
        <el-descriptions-item label="请求URL" :span="2">{{ currentLog.operUrl }}</el-descriptions-item>
        <el-descriptions-item label="请求参数" :span="2">
          <div class="code-block">{{ currentLog.operParam || '无' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="返回参数" :span="2">
          <div class="code-block">{{ currentLog.jsonResult || '无' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="错误消息" :span="2" v-if="currentLog.status === '1'">
          <div class="error-msg">{{ currentLog.errorMsg || '无' }}</div>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import PageNavigation from '@/components/common/PageNavigation.vue'

// 查询参数
const queryParams = reactive({
  title: '',
  businessType: '',
  status: '',
  operName: '',
  beginTime: '',
  endTime: '',
  pageNum: 1,
  pageSize: 10
})

const dateRange = ref([])
const logList = ref([])
const total = ref(0)
const loading = ref(false)
const dialogVisible = ref(false)
const currentLog = ref({})

// 监听日期范围变化
const updateTimeRange = computed(() => {
  if (dateRange.value && dateRange.value.length === 2) {
    queryParams.beginTime = dateRange.value[0]
    queryParams.endTime = dateRange.value[1]
  } else {
    queryParams.beginTime = ''
    queryParams.endTime = ''
  }
  return dateRange.value
})

// 初始化页面
onMounted(() => {
  fetchLogList()
})

// 获取操作日志列表
const fetchLogList = async () => {
  loading.value = true
  try {
    // 这里应该是调用后端API，目前使用模拟数据
    // const res = await api.fetchOperLogList(queryParams)
    
    // 模拟数据
    setTimeout(() => {
      logList.value = [
        {
          operId: 1001,
          title: '用户管理',
          businessType: '1',
          method: 'com.jijuxie.system.controller.SysUserController.add()',
          operName: 'admin',
          operIp: '192.168.1.101',
          operLocation: '中国|北京|北京市',
          operUrl: '/system/user',
          operParam: '{"userName":"testuser","nickName":"测试用户","password":"******","email":"test@example.com"}',
          jsonResult: '{"code":200,"msg":"操作成功","data":null}',
          status: '0',
          errorMsg: '',
          operTime: '2025-04-24 08:30:15'
        },
        {
          operId: 1002,
          title: '房源管理',
          businessType: '2',
          method: 'com.jijuxie.house.controller.HouseController.update()',
          operName: 'agent',
          operIp: '192.168.1.102',
          operLocation: '中国|上海|上海市',
          operUrl: '/house/info',
          operParam: '{"houseId":101,"title":"阳光花园3室2厅","price":"300万"}',
          jsonResult: '{"code":200,"msg":"操作成功","data":null}',
          status: '0',
          errorMsg: '',
          operTime: '2025-04-24 09:15:22'
        },
        {
          operId: 1003,
          title: '登录日志',
          businessType: '3',
          method: 'com.jijuxie.system.controller.SysLogininforController.clean()',
          operName: 'admin',
          operIp: '192.168.1.103',
          operLocation: '中国|广州|广州市',
          operUrl: '/system/logininfor/clean',
          operParam: '{}',
          jsonResult: '',
          status: '1',
          errorMsg: '数据库连接失败',
          operTime: '2025-04-24 10:05:30'
        }
      ]
      total.value = 3
      loading.value = false
    }, 500)
  } catch (error) {
    console.error('获取操作日志失败:', error)
    loading.value = false
    ElMessage.error('获取操作日志失败')
  }
}

// 搜索
const handleQuery = () => {
  queryParams.pageNum = 1
  fetchLogList()
}

// 重置
const resetQuery = () => {
  queryParams.title = ''
  queryParams.businessType = ''
  queryParams.status = ''
  queryParams.operName = ''
  dateRange.value = []
  queryParams.beginTime = ''
  queryParams.endTime = ''
  handleQuery()
}

// 分页大小变化
const handleSizeChange = (size) => {
  queryParams.pageSize = size
  fetchLogList()
}

// 分页页码变化
const handleCurrentChange = (page) => {
  queryParams.pageNum = page
  fetchLogList()
}

// 清空日志
const handleClear = () => {
  ElMessageBox.confirm('确定要清空所有操作日志吗？此操作不可恢复！', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('清空成功')
    fetchLogList()
  }).catch(() => {
    // 取消操作
  })
}

// 查看详细信息
const handleDetail = (row) => {
  currentLog.value = row
  dialogVisible.value = true
}

// 导出数据
const exportData = () => {
  ElMessage.info('数据导出功能开发中')
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  font-size: 24px;
  margin: 0 0 10px 0;
}

.page-header p {
  color: #666;
  margin: 0;
}

.search-form {
  margin-bottom: 20px;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 4px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.code-block {
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 150px;
  overflow-y: auto;
}

.error-msg {
  color: #f56c6c;
  padding: 10px;
  background: #fef0f0;
  border-radius: 4px;
}
</style> 